<template>
  <view class="shop-list-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <uni-search-bar
        v-model="keyword"
        placeholder="搜索店铺"
        @confirm="handleSearch"
        @clear="handleClear"
      ></uni-search-bar>
    </view>

    <!-- 分类筛选 -->
    <scroll-view scroll-x class="category-scroll" v-if="categories.length > 0">
      <view class="category-list">
        <view 
          class="category-item" 
          :class="{ active: !selectedCategory }"
          @tap="selectCategory(null)"
        >
          全部
        </view>
        <view 
          v-for="category in categories" 
          :key="category.id"
          class="category-item"
          :class="{ active: selectedCategory === category.id }"
          @tap="selectCategory(category.id)"
        >
          {{ category.name }}
        </view>
      </view>
    </scroll-view>

    <!-- 店铺列表 -->
    <scroll-view 
      scroll-y 
      class="shop-scroll"
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 推荐店铺 -->
      <view class="recommended-section" v-if="showRecommended">
        <view class="section-title">
          <text>推荐店铺</text>
        </view>
        <view class="shop-grid">
          <view 
            class="shop-card recommended"
            v-for="shop in recommendedShops"
            :key="shop.id"
            @tap="toShopDetail(shop.id)"
          >
            <image :src="shop.logo" mode="aspectFill" class="shop-logo"></image>
            <view class="shop-info">
              <text class="shop-name">{{ shop.name }}</text>
              <text class="shop-desc">{{ shop.description }}</text>
              <view class="shop-stats">
                <text>商品 {{ shop.productCount }}</text>
                <text>销量 {{ shop.salesCount }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 普通店铺列表 -->
      <view class="shop-list">
        <view 
          class="shop-card"
          v-for="shop in shops"
          :key="shop.id"
          @tap="toShopDetail(shop.id)"
        >
          <image :src="shop.logo" mode="aspectFill" class="shop-logo"></image>
          <view class="shop-info">
            <text class="shop-name">{{ shop.name }}</text>
            <text class="shop-desc">{{ shop.description }}</text>
            <view class="shop-stats">
              <text>商品 {{ shop.productCount }}</text>
              <text>销量 {{ shop.salesCount }}</text>
            </view>
          </view>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>

      <!-- 加载更多 -->
      <uni-load-more :status="loadMoreStatus"></uni-load-more>
    </scroll-view>
  </view>
</template>

<script>
import api from '@/config/api'

export default {
  data() {
    return {
      keyword: '',
      selectedCategory: null,
      categories: [],
      shops: [],
      recommendedShops: [],
      showRecommended: true,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      isRefreshing: false,
      loadMoreStatus: 'more'
    }
  },
  onLoad() {
    this.loadShopList()
    this.loadRecommendedShops()
  },
  methods: {
    // 加载店铺列表
    async loadShopList(refresh = false) {
      if (refresh) {
        this.pageNum = 1
        this.shops = []
      }

      try {
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          keyword: this.keyword,
          categoryId: this.selectedCategory
        }

        const res = await api.shop.list(params)
        
        if (res.code === 200 && res.data) {
          if (refresh) {
            this.shops = res.data.records
          } else {
            this.shops = [...this.shops, ...res.data.records]
          }
          
          this.total = res.data.total
          this.loadMoreStatus = this.shops.length >= this.total ? 'noMore' : 'more'
        }
      } catch (error) {
        console.error('加载店铺列表失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
        this.loadMoreStatus = 'more'
      }
    },

    // 加载推荐店铺
    async loadRecommendedShops() {
      try {
        const res = await api.shop.getRecommended({
          pageNum: 1,
          pageSize: 6
        })
        
        if (res.code === 200 && res.data) {
          this.recommendedShops = res.data.records
          this.showRecommended = this.recommendedShops.length > 0
        }
      } catch (error) {
        console.error('加载推荐店铺失败:', error)
        this.showRecommended = false
      }
    },

    // 搜索
    handleSearch() {
      this.loadShopList(true)
    },

    // 清除搜索
    handleClear() {
      this.keyword = ''
      this.loadShopList(true)
    },

    // 选择分类
    selectCategory(categoryId) {
      this.selectedCategory = categoryId
      this.loadShopList(true)
    },

    // 下拉刷新
    async onRefresh() {
      this.isRefreshing = true
      await this.loadShopList(true)
      this.isRefreshing = false
    },

    // 加载更多
    loadMore() {
      if (this.loadMoreStatus === 'more') {
        this.pageNum++
        this.loadShopList()
      }
    },

    // 跳转到店铺详情
    toShopDetail(id) {
      uni.navigateTo({
        url: `/pages/shop/detail/index?id=${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-list-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.search-bar {
  padding: 20rpx;
  background-color: #fff;
}

.category-scroll {
  background-color: #fff;
  white-space: nowrap;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;

  .category-list {
    display: inline-flex;
    padding: 0 20rpx;

    .category-item {
      padding: 10rpx 30rpx;
      margin-right: 20rpx;
      border-radius: 30rpx;
      font-size: 28rpx;
      color: #666;
      background-color: #f5f5f5;

      &.active {
        color: #fff;
        background-color: #ff5500;
      }
    }
  }
}

.shop-scroll {
  height: calc(100vh - 200rpx);
}

.recommended-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 20rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
  }
}

.shop-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin: 20rpx;
  display: flex;
  align-items: center;

  &.recommended {
    margin: 0;
    padding: 0;
    display: block;
  }

  .shop-logo {
    width: 120rpx;
    height: 120rpx;
    border-radius: 12rpx;
    margin-right: 20rpx;
  }

  .shop-info {
    flex: 1;
    overflow: hidden;

    .shop-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }

    .shop-desc {
      font-size: 26rpx;
      color: #666;
      margin-bottom: 10rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .shop-stats {
      font-size: 24rpx;
      color: #999;

      text {
        margin-right: 20rpx;
      }
    }
  }
}
</style> 